<template>
  <div>
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">包年分摊收入</div>
      </div>
    </div>
    <el-form inline :model="form" label-width="80px">
      <el-form-item label="账期">
        <el-date-picker 
          size="mini" 
          v-model="form.month" 
          value-format="yyyyMM" 
          type="month" 
          placeholder="选择月"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="区域">
        <dx-cascader :area_id.sync="form.areaId"/>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="handle_search()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="warning" @click="handle_export()">导出</el-button>
      </el-form-item>
    </el-form>
    <div class="tableBox">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%;"
        max-height="500"
        border
        stripe
        ref="table"
        class="tableTh28"
      >
        <el-table-column :label="item.label" :prop="item.prop" :key="index" v-for="(item, index) in column" min-width="110">
        </el-table-column>
      </el-table>
    </div>  
  </div>

</template>
<script>
import { $budgetAPI } from "@/api";
import { downLoadExcelParams } from "@/utils/zipdownload.js"
import { getSessionStorage } from "@/common/js/storage";
export default {
  data(){
    return {
      tableLoading: false,
      tableData: [],
      column: [],
      form: {
        month: null,
        areaId: null,
      },
      disabledTime: "",
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > new Date(this.disabledTime).getTime() ;
        }
      },
      accountInfo: null,
    }
  },
  created(){
    this.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
    this.form.areaId = this.accountInfo.areaId;
    this.getMaxMonth();
  },
  methods: {
    getList(){
      console.log(this.form);
      $budgetAPI.queryAnnualAllocationData({...this.form}, res => {
        if(res.code == 0){
          console.log(res);
          const { data, key, name } = res.content;
          this.column = key.map((it, i) => {
            return {
              prop: it,
              label: name[i]
            }
          })
          this.tableData = data;
        }
      })
    },
    getMaxMonth(){
      $budgetAPI.getAnnualAllocationMaxMonth({}, res => {
        this.form.month = res.content;
        this.disabledTime = res.content.slice(0,4) + "-" + res.content.slice(4);
        this.getList();
      })
    },
    handle_search(){
      this.getList();
    },
    //导出
    handle_export(){
      let fileName = this.form.month + "包年分摊收入";
      downLoadExcelParams("/annualAllocation/exportData", {...this.form}, fileName);
    },
  },
}
</script>